<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网页播放器</title>
</head>
<style>
    .top{
        display: flex;
        justify-content:center;
        width: 420px;
        height: 40px;
        margin: 50px auto;
        background-position: 0 0;
        z-index: 10;
    }
    .music-name{
        width: 50%;
    }
    .music-author{
        width: 20%;
        color: slateblue;
        cursor: pointer
    }
    .music-operate{
        width: 30%;
    }
    .main{
        display: flex;
        justify-content:space-around;
        margin: 50px;
    }
    .music-sheet{
        width: 30%;
        border-style:dashed;
    }
    .music-list{
        /*display: flex;*/
        width: 40%;
        border-style:dashed;
        /*justify-content:space-around;*/
    }
    .list{
        display: flex;
        /*flex-direction: row;*/
        justify-content:space-around;
        /*flex-flow: row  wrap;*/
        width:100%;
        margin: 10px auto;
        padding: 10px;
    }
    .music-playlist{
        width: 20%;
        border-style:dashed;
    }
    .audio{
        left: 40%;
        position: fixed;
        bottom: 0;
        width: 100%;
    }
    .fleft{
        float: left;
    }
    .blog-user{
        width: 100px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        display: inline-block;
        float: right;
        /*background-image: url(img/qq.png)*/
    }
    .active{
        color: blue;
    }
    .mysheet{
        width: 20%;
        border-style:dashed;
    }
</style>
<body>
<div class="user">
    <a href="/toRegister" class="blog-user" >注册</a>
    <a href="/toLogin" class="blog-user" >登录</a>
</div>

 <!--   <div class="top">
        <input type="text" class="name" placeholder="搜索歌手" value="仙剑">
        <select name="source" class="source">
            <option value="1">库内搜索</option>
            <option value="2">163在线搜索</option>
        </select>
        <button class="search" data-type="100">搜索</button>

    </div>-->
    <div class="main">
       <div class="music-sheet">
            <div style="text-align: center">
                <h2 >歌单搜索</h2>
                <input type="text" class="name" placeholder="搜索歌曲" value="仙剑">
                <select name="source" class="source">
                    <option value="1">库内搜索</option>
                    <option value="2">163在线搜索</option>
                </select>
                <button class="search" data-type="1000">搜索</button>
            </div>
               <ul class="show_sheet">
                   <li>仙剑 <span>10</span> <button data-id="2774225211" class="searchSheet">查看</button></li>
               </ul>
        </div>
        <div class="music-list">
            <div style="text-align: center">
                <h2 >歌曲搜索</h2>
                <input type="text" class="name" placeholder="搜索歌曲" value="仙剑">
                <select name="source" class="source">
                    <option value="1">库内搜索</option>
                    <option value="2">163在线搜索</option>
                </select>
                <button class="search" data-type="1">搜索</button>
            </div>
            <div class="show_list">
                <div class="list">
                    <div class="music-name">
                        偏爱
                    </div>
                    <div class="music-author">
                        张芸京
                    </div>
                    <div class="music-operate">
                        <button class="play" data-songid="5238992">播放</button>
                        <button class="addList">添加到播放列表</button>
                    </div>
                </div>
                <div class="list">
                    <div class="music-name">
                        杀破狼—《仙剑奇侠传》主题曲
                    </div>
                    <div class="music-author">
                        小念姑凉
                    </div>
                    <div class="music-operate">
                        <button class="play" data-songid="1381434356">播放</button>
                        <button class="addList">添加到播放列表</button>
                    </div>
                </div>
                <div class="list">
                    <div class="music-name">
                        一直很安静-《仙剑奇侠传》插曲
                    </div>
                    <div class="music-author">

                    </div>
                    <div class="music-operate">
                        <button class="play" data-songid="1446379591">播放</button>
                        <button class="addList">添加到播放列表</button>
                    </div>
                </div>
                <div class="list">
                    <div class="music-name">
                        忘记时间
                    </div>
                    <div class="music-author">
                        胡歌
                    </div>
                    <div class="music-operate">
                        <button class="play" data-songid="86360">播放</button>
                        <button class="addList">添加到播放列表</button>
                    </div>
                </div>
            </div>


        </div>
        <div class="music-playlist">
            <div>
                <h2 style="text-align: center">播放列表</h2>
            </div>
            <ul class="palylist">
               <!-- <li class="5238992"><div class="fleft active">偏爱</div><button class="play" data-songid="5238992">播放</button></li>
                <li><div class="fleft">一直很安静-《仙剑奇侠传》插曲</div><button class="play" data-songid="1446379591">播放</button></li>
                <li><div class="fleft">杀破狼—《仙剑奇侠传》主题曲</div><button class="play" data-songid="1381434356">播放</button></li>-->
            </ul>
        </div>
        <div class="mysheet">
            <div>
                <h2 style="text-align: center">歌单</h2>
            </div>
            <div style="text-align: center">
                <button class="playsheet">播放歌单</button>
            </div>
            <ul class="user_sheet">
{{/*                <li>未命名</li>*/}}
            </ul>
        </div>
    </div>
    <div class="audio">
        <audio id="music1" src="" controls="controls" >
            Your browser does not support the audio element.
        </audio>
        <audio id="myAudio" src="http://music.163.com/song/media/outer/url?id=86360.mp3">
{{/*            <source src="">*/}}
{{/*            <source src="http://music.163.com/song/media/outer/url?id=5238992.mp3" type="audio/ogg">*/}}
            您的浏览器不支持 audio 元素。
        </audio>
    </div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script src="/dwz/layer/layui.js"></script>
<script>
    $(function (){
        const htp = "http://127.0.0.1"
        // const htp = "http://gotobby.cn"

        var token = sessionStorage.getItem("token");
        console.log(token)
        if(token != "" && token != undefined){
            $('.mysheet').show()
            $('.user').hide()
            getSheet()
        }else{

        }

        layui.use('layer', function(){
            var layer = layui.layer;
            // layer.msg('Hello World');
        });



        var playlist = []
        var play_id
        $('.search').click(function (){
            var name = $(this).prev().prev().val()
            var source = $(this).prev().val()
            var type = $(this).data('type')
            // if(name == ''){
            //     alert('歌曲名不能为空')
            //     return
            // }
            console.log(name)
            console.log(source)
            console.log(type)
            if(type == 100){//歌手搜索
                var url = htp+"/music/getSingerSingle?keyword"
            }else{
                if (source == 1){
                    var url =htp+"/music/storeSearch?keyword="+name+"&type="+type
                }else{
                    var url =htp+"/music/search?keyword="+name+"&type="+type
                }
            }


            //这么写会有问题 可以写成同步模式 或者改 先实现功能再说

            $.get(url,function(data){
                if(data.code == 201){
                    layer.msg(data.message)
                    return false
                }
                // alert("数据: " + data + "\n状态: " + status);
                switch (type){
                    case 1:
                        addSinger(data.data)
                        break
                    case 1000:
                        addSheet(data.data)
                        break
                    default :
                        break;
                }
            });
        })
        $('body').on('click', '.play', function() {
            $('#music1')[0].pause();
            var luyinpath = $(this).data('songid');
            // if()
            play_id = luyinpath
            console.log(luyinpath)
            luyinpath = 'http://music.163.com/song/media/outer/url?id='+luyinpath+'.mp3'
            $('#myAudio').attr('src', luyinpath);

            sleep(500).then(() => {
                myVid = document.getElementById("myAudio");
                if (myVid.networkState == 3) {
                    layer.msg('音频资源涉嫌vip,暂且无法播放');
                    return false
                }
                $('li').removeClass("active")
                $('#music1').attr('src', luyinpath);
                $('#music1')[0].play();
                //判断是否在播放列表中 在的话切换播放顺序
                var is_list = 0
                for (var i=0;i<playlist.length;i++){
                    if(playlist[i] == play_id){
                        is_list = 1;
                    }
                }
                if(is_list == 1){
                    $('.'+play_id+'').addClass('active')
                    console.log('我的')
                    return false
                }else{
                    var name = $(this).parents('.list').find('.music-name').html()
                    playlist.push(play_id)
                    var str = '<li class="'+play_id+' active">' +
                        '<div class="fleft ">'+name+'</div>' +
                        '<button class="play" data-songid="'+play_id+'">播放</button>' +
                        '<button class="addSheet" data-songid="'+play_id+'">添加到歌单</button>' +
                        '</li>'
                    $('.palylist').append(str);
                }
                //不在往播放列表里加
            })
        });
        var audios = document.getElementsByTagName("audio");
        for(var i=0;i<audios.length;i++){
            //console.log("audios "+i+"  SRC:" + audios[i].currentSrc);
            audios[i].addEventListener('ended', function () {
                for (var i=0;i<playlist.length;i++){
                    if(playlist[i] == play_id){
                        console.log("找到播放的歌曲")

                        var ii = parseFloat(i)+parseFloat(1)
                        if(ii >=playlist.length){
                            ii = 0
                        }
                        console.log(playlist.length)
                        console.log(ii)
                        console.log(playlist[ii])
                        luyinpath = 'http://music.163.com/song/media/outer/url?id='+playlist[ii]+'.mp3'
                        $('#music1').attr('src', luyinpath);
                        try{
                             $('#music1')[0].play();
                        }catch (err){
                            console.log('错误信息')
                            continue
                        }
                        $('li').removeClass("active")
                        $('.'+playlist[ii]+'').addClass('active')
                        play_id = playlist[ii]
                        return  false
                    }
                }
                console.log("切换下一首")
            }, false);
        }

        $('body').on('click','.searchSheet',function (){
            var url = htp+'/music/sheetSearch?song_sheet_id='+$(this).data('id')
            $.get(url,function (res){
                if(res.code == 201){
                    layer.msg(data.message)
                    return false
                }
                addSinger(res.data)
            })
        })
        $('body').on('click','.addList',function (){
            var songid =  $(this).prev().data('songid')

            luyinpath = 'http://music.163.com/song/media/outer/url?id='+songid+'.mp3'
            $('#myAudio').attr('src', luyinpath);

            sleep(500).then(() => {
                myVid=document.getElementById("myAudio");
                // 这里写sleep之后需要去做的事情
                console.log( $('#myAudio').attr('src'))
                console.log('音频播放状态'+ document.getElementById("myAudio").networkState)
                if(myVid.networkState ==3){
                    layer.msg('音频资源涉嫌vip,暂且无法播放');
                    return false
                }
                var name = $(this).parents('.list').find('.music-name').html()
                if($("li").is('.'+songid+'') == false){
                    var str = '<li class="'+songid+'">' +
                        '<div class="fleft">'+name+'</div>' +
                        '<button class="play" data-songid="'+songid+'">播放</button>' +
                        '<button class="addSheet" data-songid="'+songid+'">添加到歌单</button>' +
                        '</li>'
                    $('.palylist').append(str);
                    playlist.push(songid)
                    console.log(playlist)
                }
            })
            //
        })
        //创建歌单
        $('body').on('click','.playsheet',function (){
            $('.user_sheet').find("li").each(function(){
                songid = $(this).data('sid')
                name = $(this).html()
                playlist.push($(this).data('sid'))
                var str = '<li class="'+songid+'">' +
                    '<div class="fleft">'+name+'</div>' +
                    '<button class="play" data-songid="'+songid+'">播放</button>' +
                    '</li>'
                $('.palylist').append(str);
            });
        })
        $('body').on('click','.addSheet',function (){
            var song_id = $(this).data('songid')
            var song_name = $(this).parents('li').find('.fleft').html()
            $.ajax({
                type: 'POST',
                url: htp+'/music/addSheet',
                dataType: 'json',
                data:{song_id:song_id,song_name:song_name},
                jsonp: 'callback',
                beforeSend: function (XMLHttpRequest) {
                    XMLHttpRequest.setRequestHeader("token",token);
                },
                success (data) {
                    console.log(data)
                    layer.msg(data.msg)
                    if(data.code == 200){
                        getSheet()
                    }

                },
                error (jqXHR, textStatus, errorThrown) {
                    // 错误信息处理

                }
            });

        })
        //通过作者搜索歌曲
        $('body').on('click','.music-author',function (){
            console.log($(this).data('singerid'))
            console.log($(this).html())
            singer_id =$(this).data('singerid')
            singer_name = $(this).html()
            layer.confirm('搜索来源？', {
                btn: ['库内', '在线'] //可以无限个按钮
            }, function(index, layero){
                var url = htp+"/music/getSingerSingle?singer_id="+singer_id+"&singer_name="+singer_name+"&type=1"
                $.get(url,function (res){
                    if(res.code == 201){
                        layer.msg(data.message)
                        return false
                    }
                    addSinger(res.data)
                })
                //按钮【按钮一】的回调
            }, function(index){
                var url = htp+"/music/getSingerSingle?singer_id="+singer_id+"&singer_name="+singer_name+"&type=2"
                $.get(url,function (res){
                    if(res.code == 201){
                        layer.msg(data.message)
                        return false
                    }
                    addSinger(res.data)
                })
                //按钮【按钮二】的回调
            });
        })
        function sleep (time) {
            return new Promise((resolve) => setTimeout(resolve, time));
        }
        function addSinger(data){
            $(".show_list").html('')
            var str = ''
            for (var i=0;i<data.length;i++){
                // console.log(songs[i])
                str += '<div class="list">\n ' +
                    '<div class="music-name">'+data[i]['song_name']+'</div>\n         ' +
                    '   <div class="music-author" data-singerid="'+data[i]['singer_id']+'">'+data[i]['singer']+'</div>\n          ' +
                    '  <div class="music-operate">\n ' +
                    '<button class="play" data-songid="'+data[i]['song_id']+'" >播放</button>\n               ' +
                    ' <button class="addList">->播放列表</button>\n ' +
                    '</div>\n ' +
                    ' </div>'
            }
            $(".show_list").append(str)
        }
        function addSheet(data){
            $('.show_sheet').html('')
            var str = ''
            for (var i=0;i<data.length;i++){
                str += '<li>'+data[i]['sheet_name']+'<span>'+data[i]['track_count']+'</span> <button class="searchSheet" data-id="'+data[i]['song_sheet_id']+'">查看</button></li>'
            }
            $('.show_sheet').append(str)
        }
        function getSheet(){
            $.ajax({
                type: 'POST',
                url: htp+'/music/getSheet',
                dataType: 'json',
                jsonp: 'callback',
                beforeSend: function (XMLHttpRequest) {
                    XMLHttpRequest.setRequestHeader("token",token);
                }, success (data) {
                        if(data.code == 200){
                            rows = data.data
                            var str = ''
                            for(var i=0;i<rows.length;i++){
                                str +='<li data-sid="'+rows[i]['song_id']+'">'+rows[i]['song_name']+'</li>'
                            }


                            $('.user_sheet').html('')
                            $('.user_sheet').append(str)
                        }

                },
                error (jqXHR, textStatus, errorThrown) {
                    // 错误信息处理
                    console.error(textStatus, errorThrown)
                }
            });
        }

    })
</script>
</html>